import React, { Component } from 'react'
import PropTypes from 'prop-types'

export default class TodoListItem extends Component {

    static propTypes = {
      id: PropTypes.number,
      title: PropTypes.string,
      isok: PropTypes.bool
    }

    //切换完成状态
    Changeisok = () => {
      this.props.changeisok(this.props.id)
    }
    //删除待办事项
    deletework = () => {
      this.props.Delet(this.props.id)
    }
    //删除已勾待办事项
    // boxcheck = (e) => {
    //   if(e.target.checked) {
    //     this.props.gouxuan(this.props.id)
    //   }
    // }

  render() {
    const {id, title, isok} = this.props
    return (
          <li className="card column is-4">
            <header className="card-header">
              <p className="card-header-title">
                {isok ? '已完成' : '待办'}事项
                <input
                  type='checkbox'
                  onClick={this.boxcheck}
                />
              </p>
            </header>
            <div className="card-content">
              <div className="content">
                {title}
              </div>
            </div>
            <footer className="card-footer">
              <button
               className="card-footer-item"
               onClick={this.Changeisok}
              >
                切换成{isok ? '未' : '已'}完成</button>
              <button
               className="card-footer-item"
               onClick={this.deletework}
              >
              删除</button>
            </footer>
          </li>
    )
  }
}
